<script setup>
import { fetch7DayData } from '@/api/weatherAPI'
import { initStackedAreaChart } from '@/util/echerts'
import { ref,watch } from 'vue'

// 引入堆叠面积图表组件


// import {onMounted} from 'vue'

// 声明前端页面所要展示的数据
const maxTemps = ref([]) // 最高温度
const minTemps = ref([]) // 最低温度
const fxDates = ref([]) // 预报时间

import { useCityStore } from '../stores/cityStore'
const cityStore = useCityStore()

getData(cityStore.location.id) // 调用网络请求函数

// 封装网络请求的函数
// function getData() {
//   axios
//     .get('https://devapi.qweather.com/v7/weather/7d', {
//       params: {
//         location: '101010100',
//         key: '7c6dcc5163e94db784ea1f51c0bb85ca',
//       },
//     })
//     .then((response) => {
//       console.log(response.data)
//       if (response.data.code === '200') {
//         response.data.daily.forEach((element) => {
//           fxDates.value.push(element.fxDate)
//           maxTemps.value.push(element.tempMax)
//           minTemps.value.push(element.tempMin)
//         })
//         initEcharts(fxDates.value, minTemps.value, maxTemps.value)
//       } else {
//         console.error('API Error:', response.data.code)
//       }
//     })
//     .catch((error) => {
//       console.error('Request Error:', error)
//     })
// }
const chartDom =ref(null)
async function getData(locationid) {
  const response=await fetch7DayData(locationid)
console.log(response)
         fxDates.value =[]
         maxTemps.value=[]
         minTemps.value=[]
response.daily.forEach((element) => {
  
          fxDates.value.push(element.fxDate)
          maxTemps.value.push(element.tempMax)
          minTemps.value.push(element.tempMin)
        })
        initStackedAreaChart(chartDom.value, fxDates.value, minTemps.value, maxTemps.value)
      }
      watch(
    ()=>cityStore.location,
  ()=>{
    getData(cityStore.location.id)
  }
)

</script>
<template>
  <div id="main" ref="chartDom"></div>
</template>
<style scoped>
#main {
  width: 100%;
  height: 400px;
}
</style>